<template>
    
    <div style='width:100%;display:flex;flex-direction:column;height:100%;'>
        <div style="padding:10px;font-weight:bold;border-bottom:1px solid #ddd;background:#fff;box-sizing:border-box;height:40px;">{{name}}</div>
        <div class='mode' >
            <div v-for="(item,index) in data " :key="index" :style="{'background':item.color}" class="item"  @click="openWin(item)">
                <div>{{item.label}}</div>
                <div>{{item.value}}</div>
            </div>
        </div>

        <el-dialog :title="commonListData.name" class="listDialog"
          style="left:5%;top:10%;width:90% !important;height:70VH;overflow:hidden"
           append-to-body :visible.sync="showDialog">
            <list :commonListData="commonListData" style="width:100%"  v-if="showDialog" @openWin="openWin2"></list>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import List  from '../List.vue'
export default {
    props:["name","appid","url"],
    components: {
        List,
    },
    data(){
        return{
            showDialog:false,
            commonListData:{
                key:"",
                model:"",
                appid:"business",
                name:""
            },
            data:[{
                label:"请假单",
                value:"0",
                color:"red"
            },{
                label:"调休单",
                value:"0",
                color:"red"
            }]
        }
    },
    created(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.$post(this.appid,this.url,{}).then(data=>{
                this.data=data;
            })
        },
        openWin(item){
            if(item.key){
                this.commonListData.key=item.key;
                this.commonListData.model=item.model;
                this.commonListData.name=item.label;
                this.showDialog=true;

            }
            
        },
        openWin2(item){
            this.$emit("openWin",item);
        }
    }
}
</script>
<style scoped>
.mode{
    width:100%;
    display:flex;
    flex-direction:row;
    flex:1;
    justify-content:center;
    align-items:center;
    background:#fff;
}
.item{
    color:#fff;
    width:40%;
    height:150px;
    margin-left:20px;
    display:flex;
    flex-direction:column;
    
    justify-content:center;
    align-items:center;
    font-size:22px;
    border-radius:15px;
}
.listDialog{
    text-align:left;
}
.listDialog>>>.el-dialog{
    width:100%;
}
</style>